<template>
	<view>
		<u-form v-if="inited" ref="formRef" labelPosition="left" :model="form" :rules="rules">
			<view class="title">任务信息</view>
			<view class="form_group">
				<z-input label="点位编码:" labelWidth="110" prop="code" :disabled="true" :readonly="true" :required="true"
					:value="form.code" @change="(val) => setVal('task', 'code', val)"></z-input>
				<z-input label="采样编码:" labelWidth="110" prop="cropSamplingCode" :disabled="true" :readonly="true"
					:required="true" :value="form.cropSamplingCode"
					@change="(val) => setVal('record', 'cropSamplingCode', val)"></z-input>
				<z-input-picker keyName="label" label="主要农作物:" labelWidth="110" prop="mainCrop" :disabled="!p2Edit"
					:list="mainCropList" :required="true" :showPicker="showMainCropPicker" :value="form.mainCropName"
					@cancel="showMainCropPicker = false" @confirm="setMainCrop"
					@open="() => {if(p2Edit){ showMainCropPicker = true }}"></z-input-picker>
				<template v-if="renderCropTypeList&&isInput">
					<z-input label="样品类型:" labelWidth="110" prop="cropTypeManual" :disabled="!p2Edit"  :required="true"
						:value="form.cropTypeManual"
						@change="(val) => setVal('task', 'cropTypeManual', val)"></z-input>

				</template>
				<template v-if="renderCropTypeList&&['4'].includes(form.mainCrop)">
					<z-input-picker keyName="label" label="样品类型:" labelWidth="110" prop="cropType" :disabled="!p2Edit"
						:list="cropTypeList" :required="['4'].includes(form.mainCrop)" :showPicker="showCropTypePicker"
						:value="form.cropTypeName" @cancel="showCropTypePicker = false" @confirm="setCropType"
						@open="() => {if(p2Edit){ showCropTypePicker = true }}"></z-input-picker>
				</template>


			</view>
			<view class="title">样品信息</view>
			<view class="form_group">
				<z-input label="农产品名称:" labelWidth="160" prop="cropName" :disabled="cantEdit" :readonly="cantEdit"
					:required="true" :value="form.cropName"
					@change="(val) => setVal('record', 'cropName', val)"></z-input>
				<z-input label="农产品样品称重(kg):" labelWidth="160" prop="cropWeight" :disabled="cantEdit"
					:readonly="cantEdit" :required="true" :value="form.cropWeight"
					@change="(val) => setVal('record', 'cropWeight', val)"></z-input>
				<z-input label="当季产量(公斤/亩):" labelWidth="160" prop="quarterProduction" :disabled="cantEdit"
					:readonly="cantEdit" :required="true" :value="form.quarterProduction"
					@change="(val) => setVal('record', 'quarterProduction', val)"></z-input>
			</view>
			<view class="title">照片信息</view>
			<view class="form_group upload-box" style="padding: 8px 4px 4px 4px;">
				<u-grid :border="false" col="4">
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.cropSamplingSceneImage" :remark="'cj_cropSamplingSceneImage'"
							@setVal="(val) => setVal('record', 'cropSamplingSceneImage', val)"></z-img-upload>
						<text class="z-upload-title">采样现场</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.cropSamplePackageImage" :remark="'cj_cropSamplePackageImage'"
							@setVal="(val) => setVal('record', 'cropSamplePackageImage', val)"></z-img-upload>
						<text class="z-upload-title">样品包装</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.cropBag2Label2Image" :remark="'cj_cropBag2Label2Image'"
							@setVal="(val) => setVal('record', 'cropBag2Label2Image', val)"></z-img-upload>
						<text class="z-upload-title">双袋双标签</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.cropOtherImage" :remark="'cj_cropOtherImage'"
							@setVal="(val) => setVal('record', 'cropOtherImage', val)"></z-img-upload>
						<text class="z-upload-title">其他</text>
					</u-grid-item>
				</u-grid>
			</view>
		</u-form>
		<text style="font-size: 13px; color: red; margin-top: 30px; margin-left: 8px;">注:采样现场照片需带工具</text>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NotifyMix from '@/mixins/notify-fix.js'
	import Util from '@/utils/index.js'
	export default {
		mixins: [NotifyMix],
		data() {
			return {
				form: {
					mainCrop: '',
					mainCropName: '',
					code: "",
					cropSamplingCode: "",
					cropTypeName: "",
					cropTypeManual: "",
					cropType: '',
					cropName: '',
					cropWeight: '',
					quarterProduction: "",
					cropSamplingSceneImage: "",
					cropSamplePackageImage: "",
					cropBag2Label2Image: '',
					cropOtherImage: ''
				},
				rules: {
					"mainCrop": {
						required: true,
						message: "请选择主产作物",
						trigger: ['change'],
					},
					"cropType": {
						required: false,
						message: "请选择作物类型",
						trigger: ['change'],
					},
					"cropName": {
						required: true,
						message: "请输入农产品名称",
						trigger: ['change'],
					},
					"cropWeight": {
						required: true,
						message: "请输入农产品样品称重",
						trigger: ['change'],
					},
					"quarterProduction": {
						required: true,
						message: "请输入当季产量",
						trigger: ['change'],
					},
					"cropTypeManual": {
						required: true,
						message: "请输入样品类型",
						trigger: ['change'],
					},

				},
				showCropTypePicker: false,
				cropTypeList: [],
				showMainCropPicker: false,
				mainCropList: [],
				inited: false,
				renderCropTypeList: false,
				isInput: false, //是否是输入框
			}
		},
		computed: {
			...mapState({
				action: state => state.cjRecord.action,
				taskInfo: state => state.cjRecord.taskInfo,
				recordInfo: state => state.cjRecord.recordInfo,
				isLT200m: state => state.cjRecord.isLT200m
			}),
			p1Edit() {
				return ['edit', 'add'].includes(this.action) && this.taskInfo.positionType === '1' && this.isLT200m
			},
			p2Edit() {
				return ['edit', 'add'].includes(this.action) && this.taskInfo.positionType === '2'
			},
			canEdit() {
				return this.p1Edit || this.p2Edit
			},
			cantEdit() {
				return !this.canEdit
			}
		},
		methods: {
			...mapMutations({
				setTaskInfoAttr: 'cjRecord/setTaskInfoAttr',
				setRecordInfoAttr: 'cjRecord/setRecordInfoAttr',
			}),
			setVal(target, key, val) {
				this.form[key] = val
				let d = {
					key,
					val
				}
				if (target === 'task') {
					this.setTaskInfoAttr(d)
				} else if (target === 'record') {
					this.setRecordInfoAttr(d)
				}
			},
			setCropType(val) {

				this.form.cropType = val.value
				this.form.cropTypeName = val.label
				this.setTaskInfoAttr({
					key: 'cropType',
					val: val.value
				})
				this.showCropTypePicker = false
			},
			setMainCrop(val) {
				this.form.mainCrop = val.value
				this.form.mainCropName = val.label
				this.setTaskInfoAttr({
					key: 'mainCrop',
					val: val.value
				})
				this.showMainCropPicker = false
				this.form.cropType = ''
				this.form.cropTypeName = ''
				this.setTaskInfoAttr({
					key: 'cropType',
					val: ''
				})
				this.cropTypeList = []
				// 蔬菜
				if (['4'].includes(val.value)) {
					this.rules.cropType.required = true
					this.rules.cropTypeManual.required = true
					this.renderCropTypeList = false
					this.isInput = false
					this.$nextTick(() => {
						this.cropTypeList = Util.DictUtil.getDict('cj_crop_type').filter(x => x
							.relateDictItemValue === val.value)
						this.renderCropTypeList = true
					})
					//水果以及其他
				} else if (['5', '6'].includes(val.value)) {
					this.rules.cropType.required = true
					this.rules.cropTypeManual.required = true
					this.renderCropTypeList = false
					this.isInput = true
					this.$nextTick(() => {
						this.renderCropTypeList = true
					})
				}else{
					this.rules.cropType.required = false
					this.rules.cropTypeManual.required = false
					this.renderCropTypeList = false
					this.isInput = false
					
				}
			},
			async checkForm() {
				try {
					await this.$refs.formRef.validate()
					return true
				} catch (e) {
					return false
				}
			}
		},
		mounted() {
			Util.ObjUtil.assign(this.taskInfo, this.form)
			Util.ObjUtil.assign(this.recordInfo, this.form)
			if (!Util.StringUtil.isEmpty(this.taskInfo.mainCrop)) {
				this.form.mainCropName = Util.DictUtil.getLabel('cj_main_crop', this.taskInfo.mainCrop)
			}
			this.mainCropList = Util.DictUtil.getDict('cj_main_crop')

			if (!Util.StringUtil.isEmpty(this.taskInfo.cropType)) {
				this.form.cropTypeName = Util.DictUtil.getLabel('cj_crop_type', this.taskInfo.cropType)
			}
			this.renderCropTypeList = false
			if (['4'].includes(this.form.mainCrop)) {
				this.rules.cropType.required = true
				this.rules.cropTypeManual.required = true
				this.renderCropTypeList = false
				this.isInput = false
				this.$nextTick(() => {
					this.cropTypeList = Util.DictUtil.getDict('cj_crop_type').filter(x => x.relateDictItemValue ===
						this.form.mainCrop)
					this.renderCropTypeList = true
				})
				//水果以及其他
			} else if (['5', '6'].includes(this.form.mainCrop)) {
				this.rules.cropType.required = true
				this.rules.cropTypeManual.required = true
				this.renderCropTypeList = false
				this.isInput = true
				this.$nextTick(() => {
					this.renderCropTypeList = true
				})
				console.log(this.taskInfo,'this.taskInfo',this.form)
			}else{
					this.rules.cropType.required = false
					this.rules.cropTypeManual.required = false
					this.renderCropTypeList = false
					this.isInput = false
					
				}
			this.inited = true
		}
	}
</script>

<style>
</style>